<template>
  <div class="libdocument">
    <form method="post" action="#" id="printJS-form">
      <div class="newest">
        <div class="ant-card-body">用款申请单</div>
        <div class="apply">
          <span style="float: left">项目号：{{ payment.projectNumber }}</span>
          <span style="text-align: left"> 申请日期： {{ payment.date }} </span>
        </div>
        <table border="1px" id="staffBmTable">
          <tr style="height: 40px">
            <td style="width: 14%">用款用途</td>
            <td style="width: 30%">{{ payment.purpose }}</td>
            <td>用款方式</td>
            <td style="width: 100px">{{ payment.mode }}</td>
            <td>货币货种</td>
            <td style="width: 100px">{{ payment.currencyGoods }}</td>
          </tr>
        </table>
        <table border="1px" id="staffBmTable">
          <tr style="height: 40px">
            <td style="width: 14%">用款金额</td>
            <td style="width: 60%; padding-left: 5px">
              <span style="float: left"> (大写)</span>{{ payment.amountRMB }}
            </td>
            <td>
              <span style="float: left"> (小写)</span>{{ payment.amount }}
            </td>
          </tr>
        </table>
        <table border="1px" id="staffBmTable">
          <tr style="height: 40px">
            <td style="width: 14%">用款部门</td>
            <td>{{ payment.departName }}</td>
            <td style="width: 14%">合同号</td>
            <td style="width: 35%">{{ payment.contractNo }}</td>
          </tr>
          <tr style="height: 40px">
            <td style="width: 14%">申请人</td>
            <td>{{ payment.applicantName }}</td>
            <td style="width: 14%"></td>
            <td style="width: 35%"></td>
          </tr>
          <tr style="height: 40px">
            <td style="width: 14%">部门负责人</td>
            <td></td>
            <td style="width: 14%">收款单位全称</td>
            <td style="width: 35%">{{ payment.payee }}</td>
          </tr>
          <tr style="height: 40px">
            <td style="width: 14%">财务签批</td>
            <td></td>
            <td style="width: 14%">账号</td>
            <td style="width: 35%">{{ payment.accountNumber }}</td>
          </tr>
          <tr style="height: 40px">
            <td style="width: 14%">主管签批</td>
            <td></td>
            <td style="width: 14%">开户银行</td>
            <td style="width: 35%">{{ payment.bank }}</td>
          </tr>
        </table>
      </div>
    </form>
    <div style="text-align: center; margin-top: 15px; margin-bottom: 10px">
      <el-button @click="closeCalendar">取消</el-button>
      <!-- <el-button type="primary" @click="PrintRow">打印</el-button> -->
      <el-button
        type="primary"
        onclick="print({ 
              printable: 'printJS-form', 
              type: 'html', 
              scanStyles: false
            })"
        >打印</el-button
      >
    </div>
  </div>
</template>

<script>
// import print from "print-js";
export default {
  props: {
    payment: {},
  },
  data() {
    return {
      money: {
        weather: "",
      },
      // payment: {},
    };
  },
  methods: {
    closeCalendar() {
      this.$emit("closeCalendar", false);
    },
  },
};
</script>

<style scoped>
.libdocument {
  width: 100%;
  height: 100%;
}
.newest {
  width: 750px;
  height: 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 1px 1px #aaa, 3px 0 5px 0 #aaa, 0 4px 7px 0 #aaa;
  margin: 20px auto;
}
table {
  border-collapse: collapse;
}
.ant-card-body {
  margin-top: 5px;
  font-weight: 700;
  height: 43px;
  line-height: 43px;
  text-align: center;
  display: block;
  color: #000;
  font-size: 25px;
}
.apply {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}
#staffBmTable {
  width: 100%;
  font-size: 17px;
  text-align: center;
}
</style>